<template>
    <el-container class="mainWapper">
        <el-header class="header">
            <div class="logo">
                <img src="../assets/logo2.png" alt="">
            </div>
            <div class="user">
                <img v-if="user.head_img" :src="user.head_img | fixImgUrl" alt="">
                <img v-else src="../assets/user.png" alt="">
                <span>admin</span>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                default-active="/artical"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                >
                <el-menu-item index="/artical" @click="jumpRouter('/artical')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">文章列表</span>
                </el-menu-item>
                <el-menu-item index="/editArtical" @click="jumpRouter('/editArtical')">
                    <i class="el-icon-setting"></i>
                    <span slot="title">文章编辑</span>
                </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data(){
        return{
            user:JSON.parse(localStorage.getItem('user'))
        }
    },
    methods:{
       jumpRouter(path){
           if(path != this.$route.path){
                this.$router.push(path);
           }
       }
    }
}
</script>

<style lang="less" scoped>
.mainWapper{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    .header{
        background-color: #409EFF;
        .logo{
            float: left;
            width: 200px;
            height: 100%;
            text-align: left;
            img{
                width: 80%;
                height: 80%;
                margin: 5px auto;
            }
        }
        .user{
            float:right;
            line-height: 60px;
            padding-right: 50px;
            img{
                width:50px;
                height: 50px;
                border-radius: 50%;
                vertical-align: middle;
            }
            span{
                padding-left: 10px;
                color: #fff;
                font-size: 14px;
            }
        }
    }
    .el-aside{
        background-color: #409EFF;
    }
}
</style>